<template>
  <div class="widget-page">
    <div v-if="style===0" class="swiper">
      <svg-icon v-if="translateX < 0" icon-class="arrow-btn-left" class="swiper-btn swiper-btn-left" @click="swiperLeft"></svg-icon>
      <svg-icon v-if="translateX <= 0 && translateX > (swiperWidth-contentWidth)" icon-class="arrow-btn-right" class="swiper-btn swiper-btn-right" @click="swiperRight"></svg-icon>
      <div class="swiper-box" ref="swiper">
        <div ref="swiperContent" class="swiper-content" :style="`transform: translateX(${translateX}px);`">
          <div class="swiper-item">
            <WidgetItem :widget="widgetList[0]" :widgetNum.sync="widgetNum"/>
            <WidgetItem :widget="widgetList[1]" :widgetNum.sync="widgetNum"/>
          </div>
          <div  class="swiper-item">
            <WidgetItem :widget="widgetList[2]" :widgetNum.sync="widgetNum"/>
          </div>
          <div  class="swiper-item">
            <WidgetItem :widget="widgetList[3]" :widgetNum.sync="widgetNum"/>
          </div>
          <div  class="swiper-item">
            <WidgetItem :widget="widgetList[4]" :widgetNum.sync="widgetNum"/>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="widget-box">
      <WidgetItem  v-for="item in widgetList"
        :key="item.name"
        :widget="item"
        :widgetNum.sync="widgetNum"
        :style="`grid-row-end:${item.row}`">
      </WidgetItem>
    </div>
  </div>
</template>
<script>
import WidgetItem from './widget-item.vue'

export default {
  name: 'WidgetBox',
  components: {
    WidgetItem
  },
  data () {
    return {
      widgetNum: 0,
      translateX: 0,
      swiperWidth: 0,
      contentWidth: 0,
      style: Number(this.$route.query.style),
      widgetList: [
        { name: 'clock', row: 'span 1', hasAdd: false, isVip: false, actionCode: 7362, imgUrl: require('@/assets/widget/clock.png') },
        { name: 'weather', row: 'span 1', hasAdd: false, isVip: false, actionCode: 7363, imgUrl: require('@/assets/widget/weather.png') },
        { name: 'calendar', row: 'span 2', hasAdd: false, isVip: false, actionCode: 7365, imgUrl: require('@/assets/widget/calendar.png') },
        { name: 'constellation', row: 'span 2', hasAdd: false, isVip: false, actionCode: 7364, imgUrl: require('@/assets/widget/constellation.png') },
        { name: 'almanac', row: 'span 1', hasAdd: false, isVip: false, actionCode: 7366, imgUrl: require('@/assets/widget/almanac.png') }
      ]
    }
  },
  created () {
    this.getWidgetList()
    this.$xzReg('js_func_refresh_widget_list', (res) => {
      this.getWidgetList()
    })
  },
  mounted () {
    this.$nextTick(() => {
      this.$erd.listenTo(this.$refs.swiper, this.handleResize)
      this.contentWidth = this.$refs.swiperContent.offsetWidth
    })
  },
  methods: {
    getWidgetList () {
      this.$xzAsy('xz_widget_list_has_add').then((res = []) => {
        const list = this.widgetList.reduce((arr, item) => {
          if (item.children) {
            return arr.concat(item.children)
          } else {
            return arr.concat([item])
          }
        }, [])
        list.forEach(item => {
          item.hasAdd = res.some(itemb => itemb === item.name)
        })
        this.widgetNum = res.length
      })
    },
    handleResize () {
      this.swiperWidth = this.$refs.swiper.offsetWidth
      this.translateX = 0
    },
    swiperLeft () {
      this.translateX += 210
    },
    swiperRight () {
      this.translateX -= 210
    }
  }
}
</script>
<style lang="scss" scoped>
.widget-page{
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.widget-box{
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-template-rows: 150px;
  grid-gap: 10px;
  // justify-content: center;
}
.widget-item{
  box-sizing: border-box;
  position: relative;
  max-width: 310px;
  border-radius: 8px;
  background-color: rgba(0,0,0,0.2);
  overflow: hidden;
  .widget-img{
    width: 100%;
  }
  >.svg-icon{
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 24px;
  }
  .widget-item-model{
    // display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
  }
}
.swiper {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  .swiper-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
  }
  .swiper-content {
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.4s;
    .swiper-item {
      width: 200px;
      height: 200px;
      gap: 10px;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
  .swiper-btn {
    position: absolute;
    font-size: 28px;
    opacity: 0.3;
    margin: auto;
    top: 0;
    bottom: 0;
    z-index: 9;
    &:hover {
      opacity: 1;
    }
    &.swiper-btn-left {
      left: 0;
    }
    &.swiper-btn-right {
      right: 0;
    }
  }
}
</style>
